<template>
  <grimm-page type="button-view" title="grimm-list">
    <template slot="content">
      <div disabled>
        <grimm-card class="card-wrap">
          <div slot="cardContent">
            <grimm-list>
              <grimm-item label="姓名：">
                <grimm-input placeholder="请输入姓名" v-model="name" />
              </grimm-item>
              <grimm-item label="年龄：">
                <grimm-input placeholder="请输入年龄" v-model="age"></grimm-input>
              </grimm-item>
              <grimm-item label="备注：">
                <grimm-textarea placeholder="请输入备注" v-model="backup" />
              </grimm-item>
              <grimm-item label="婚否：">
                <grimm-switch name="1" v-model="married"></grimm-switch>
              </grimm-item>
              <grimm-item label="性别：">
                <grimm-radio name="1" v-model="sex" original>男</grimm-radio>
                <grimm-radio name="0" v-model="sex" original>女</grimm-radio>
              </grimm-item>
              <grimm-item label="兴趣爱好：">
                <grimm-checkbox name="1" v-model="habits">读书</grimm-checkbox>
                <grimm-checkbox name="2" v-model="habits">跑步</grimm-checkbox>
                <grimm-checkbox name="3" v-model="habits">骑行</grimm-checkbox>
              </grimm-item>
            </grimm-list>
            <grimm-list>
              <grimm-item
                v-for="(item, idx) in list"
                :key="idx"
                :label="item.label"
              >{{item.content}}</grimm-item>
            </grimm-list>
          </div>
        </grimm-card>
      </div>
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from 'example/components/GrimmPage.vue';
export default {
  data() {
    return {
      name: '',
      age: '',
      sex: '',
      married: '',
      backup: '',
      habits: [],
      list: [
        { label: '姓名：', content: '红政' },
        { label: '年龄：', content: '18' },
        { label: '性别：', content: '男' },
      ],
      optionValue: {
        label: 'Option Checkbox',
        value: '1',
      },
    };
  },
  methods: {
    onChangeBefore(vals) {
      return /^\d{0,}$/.test(vals);
    },
  },
  components: {
    GrimmPage,
  },
};
</script>
